.device-details {
  &__alert {
    margin-bottom: 10px !important;
  }

  &__name {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #3b3b3b;
    margin-bottom: 10px;

    &::before {
      content: " ";
      width: 6px;
      height: 16px;
      background: #287def;
      border-radius: 3px;
      margin-right: 10px;
    }
  }

  &__item-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 30px;

    &--left {
      margin-right: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 200px;
    }

    &--right {
      background-color: #eff2f5;
      padding: 20px 30px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
    }
  }

  &__index-cell {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 5px 0;

    &--left {
      width: 80px;
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }

    &--right {
      width: 120px;
      padding: 5px;
      text-align: center;
      // background-color: var(--White);
      border-radius: 20px;
      font-weight: 400;
      color: #3b3b3b;
    }
  }

  &__table {
    width: 100%;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    margin-bottom: 20px;

    .el-table__header {
      th.el-table__cell {
        background-color: #f5f6f7;
      }
    }
  }

  &__status {
    padding: 3px 15px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: normal;

    &--1 {
      background: rgba(1, 176, 127, 0.16);
      color: #01b07f;
    }

    &--2 {
      background: #e2e2e2;
      color: var(--Black6);
    }

    &--3 {
      background: rgba(255, 106, 85, 0.16);
      color: #ff6a55;
    }

    &--4 {
      background: var(--White);
      color: #3b3b3b;
    }
  }

  &__graph-list-wrapper {
    overflow-x: auto;
  }

  &__graph-list {
    margin-bottom: 20px;
    text-align: center;
    white-space: nowrap;
  }

  &__graph-item {
    background-color: #f4f6f8;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    position: relative;

    &:first-child {
      &::before {
        display: none;
      }
    }

    &::before {
      content: " ";
      width: 30px;
      height: 2px;
      background-color: #287def;
      position: absolute;
      left: -30px;
      top: 50%;
      margin-top: -2px;
    }

    &--left {
      margin-right: 20px;
    }

    &--right {
      text-align: left;
    }

    &__title {
      color: #303133;
      font-weight: 400;
    }

    & + & {
      margin-left: 30px;
    }
  }
}
